<!-- 自定义导航栏 -->
<template>
  <div
    aria-expanded="false"
    class="nav-link"
    v-bind="$attrs"
    type="button"
    @click="handleClick"
  >
    <div
      class="text-center bg-white shadow icon icon-shape icon-sm border-radius-md d-flex align-items-center justify-content-center"
      :class="isRTL ? ' ms-2' : 'me-2'"
    >
      <slot name="icon"></slot>
    </div>
    <span class="nav-link-text" :class="isRTL ? ' me-1' : 'ms-1'">
      {{ navText }}
    </span>
  </div>
  <div id="" class="collapse">
    <slot name="list"></slot>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "CusSidenavCollapse",
  props: {
    navText: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapState(["isRTL"]),
  },
  methods: {
    handleClick() {
      this.$router.push("/favorites");
    },
  },
};
</script>
